<template>
  <view class="login-box">
    <view class="logo_box">
      <view class="honor-box"></view>
      <view class="login-text">欢迎来到荣耀殿堂</view>
      <!--      <uni-easyinput
        class="login"
        styleOther="width: 85vw; height: 78rpx; flex: 0.1"
        :styles="styles"
        type="text"
        :inputBorder="false"
        v-model="phoneNumber"
        placeholder="请输入用户名/手机号"
        placeholderStyle="color: #ffffff;font-size: 31rpx;"
      />

       <uni-easyinput
        class="login"
        styleOther="width: 85vw; margin-top: 27rpx; height: 78rpx; flex: 0.1"
        :styles="styles"
        type="password"
        :inputBorder="false"
        v-model="inputValue"
        placeholder="请输入密码"
        placeholderStyle="color: #ffffff;font-size: 31rpx;"
      />
      <view class="forget-box">
        <view class="forget-passward" @click="shortcut">短信登录</view>
        <view class="forget-passward" @click="register(2)">忘记密码？</view>
      </view>
      <view class="up-load-box" @click="upload">立即登录</view>
      <view class="register-login-box" @click="register(1)">新用户注册</view>-->
      <!-- #ifdef MP-WEIXIN -->
      <wx-quick-login :agree="checked" />
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <app-quick-login :agree="checked" />
      <!-- @on-click="handleWXLogin" -->
      <!-- #endif -->

    <view class="agree">
      <checkbox
        class="check-box"
        value="cb"
        style="transform: scale(0.6)"
        :checked="checked"
        @click="getContent"
      />
      <view>
        我已阅读并同意<text style="color: #5590f6" @click="getuserprotocol(1)"
          >《用户服务协议》</text
        >和<text style="color: #5590f6" @click="getuserprotocol(2)"
          >《隐私政策》</text
        ></view
      >
    </view>
    </view>
  </view>
</template>

<script setup>
import {
  ref,
  getCurrentInstance,
  onBeforeMount,
  onBeforeUnmount,
  watch,
  onMounted,
} from "vue";
import { login } from "@/api/login";
import UniEasyinput from "@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import wxQuickLogin from "./components/wx-quickly-login/index.vue";
import appQuickLogin from "./components/app-quickly-login/index.vue";
import { onLoad } from "@dcloudio/uni-app";
import { loginByQuicklyAPi } from "@/api/login/index.js";

const { proxy } = getCurrentInstance();
// niezhenji999/htzy@2017
const phoneNumber = ref("");
const inputValue = ref("");
const styles = ref({
  color: "#ffffff",
  backgroundColor: "#ffffff33",
  borderColor: "#ffffff",
});
const checked = ref(false);
const num = ref(0);
const requestShow = ref(true);

function getContent() {
  checked.value = !checked.value;
}

function getuserprotocol(data) {
  uni.navigateTo({
    url: `/package_login/pages/login/protocol?id=${data}`,
  });
}

function register(data) {
  console.log(data, "......");
  if (data == 1) {
    uni.navigateTo({
      url: "/package_login/pages/login/register",
    });
  } else {
    uni.navigateTo({
      url: "/package_login/pages/login/forget-password",
    });
  }
}

function changePassword() {
  showPassword.value = !showPassword.va;
}

function getData(data) {
  phoneNumber.value = data;
}

function getValue(data) {
  inputValue.value = data;
}

function upload() {
  if (phoneNumber.value == "") {
    proxy.modal.msg("用户名不能为空");
    return;
  }
  if (inputValue.value == "") {
    proxy.modal.msg("密码不能为空");
    return;
  }
  if (!checked.value)
    return proxy.modal.msg("请阅读《用户服务协议》和《隐私政策》并勾选");
  login({
    username: phoneNumber.value, //用户名
    password: inputValue.value, //密码
  })
    .then((res) => {
      console.log(res);
      uni.setStorageSync("token", res.access_token);
	  const isView = uni.getStorageSync("is_view_activity") || ''
	  if (isView === '1') {
	  	uni.navigateBack()
	  } else if(isView === '2') {
      uni.redirectTo({
        url: "/package_games/pages/nationalDayAnswer",
      });
    } else {
		  uni.switchTab({
			url: "/pages/index/index",
		  });
	  }

    })
    .catch((err) => {
      // console.log(err);
      if (err.data.msg == "用户不存在") {
        uni.navigateTo({
          url: "/package_login/pages/login/register",
        });
      } else {
        uni.showToast({
          title: err.data?.error_description,
          icon: "none",
          duration: 2000,
        });
      }
    });
}

const loginInfo = ref({});
const codeData = ref("");
const oldCodeData = ref("");
function shortcut() {
  uni.redirectTo({
    url: "/package_login/pages/login/index",
  });
}
// const handleWXLogin = () => {
//   window.mobile.jsCallWxLogin();
// };
// const callLoginChange = () => {
//   if (typeof( window.callLoginData) !== "undefined") {
//     loginInfo.value = JSON.parse(window.callLoginData);
//     oldCodeData.value = codeData.value;
//     codeData.value = loginInfo.value.code;
//     if (oldCodeData.value !== codeData.value) {
//       loginByQuickly();
//     }
//   }
// };

// const loginByQuickly = async () => {
//   await uni.showLoading({
//     title: "登录中...",
//   });
//   const params = {
//     client_id: "huatai",
//     client_secret: "waytale",
//     auth_type: "wx",
//     code: codeData.value,
//     wx_login_type: "1",
//     grant_type: "password",
//   };
//   const res = await loginByQuicklyAPi(params);
//   const { access_token } = res;
//   await uni.showToast({
//     title: "登录成功",
//     duration: 2000,
//   });
//   if (access_token) {
//     uni.hideLoading();
//     uni.setStorageSync("token", access_token);
//     await uni.switchTab({
//       url: "/pages/index/index",
//     });
//   }
// };

// //  #ifdef H5
// onMounted(() => {
//   window.addEventListener("callLogin", callLoginChange);
// })
// onBeforeUnmount(() => {
//   // 移除监听事件
//   window.removeEventListener("callLogin", callLoginChange, false);
// });
// // #endif
</script>
<style lang="less" scoped>
.login-box {
  font-family: "ali";
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  background-image: @login-img;
  .logo_box {
    padding-top: 203rpx;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
  }
  .honor-box {
    background-image: @login-pattern-img;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    width: 336rpx;
    height: 394rpx;
    // height: 30vh;
    // width: 50vw;
  }

  .login-text {
    width: 336rpx;
    color: #ffffff;
    font-family: "ali-m";
    font-size: 39rpx;
    margin-top: 40rpx;
    margin-bottom:40rpx;
    text-align: center;
  }

  .login-name {
    background-color: #9d9ea680;
    width: 80vw;
    height: 5vh;
    border-radius: 6rpx;
    display: flex;
    align-items: center;
    margin-top: 30rpx;
    padding-left: 20rpx;

    .uni-input-placeholder {
      color: #ffffff;
      font-size: 31.3rpx;
    }

    .uni-input-input {
      color: #ffffff;
      font-size: 31.3rpx;
    }
  }

  .forget-box {
    width: 80vw;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;

    .forget-passward {
      color: #ffffff;
      font-size: 23rpx;
      width: auto;
      text-align: right;
      margin-top: 35rpx;
      margin-bottom: 26rpx;
    }
  }

  .up-load-box {
    width: 80vw;
    //height: 78rpx;
    height: 70rpx;
    background-color: #4184F3;
    //background-color: #e86f6c;
    color: #ffffff;
    border-radius: 13rpx;
    //font-size: 31rpx;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .register-login-box {
    width: 80vw;
    height: 78rpx;
    color: #ffffff;
    border-radius: 13rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 35rpx;
    background-color: #3C5996;
  }

  .ss {
    color: #ffffff;
    font-size: 31rpx;
  }
  .agree {
    margin: 0 auto;
    color: #ffffff;
    font-size: 23rpx;
    display: flex;
    align-items: center;
    font-family: "ali";
    justify-content: center;
    margin-top: 50rpx;
    // position: fixed;
    // bottom: 80rpx;
    .checkArgeen {
      width: 28rpx;
      height: 28rpx;
      background-color: #5d5d6880;
      border-radius: 50%;
      border: 0.5px solid #ffffff;
      margin-right: 0.5rem;
    }

    .check-box {
      .uni-checkbox-wrapper {
        .uni-checkbox-input {
          // border-radius: 50% !important;
          background: transparent !important;
        }
      }
    }
  }
}
</style>
